<template>
    <table-header
        placeholder="请输入媒资名称"
        :queryList="queryList"
        @pagination="getDataList"
        :rightColSpan="4"
        :leftColSpan="20"
    >
        <template #filter>
            <el-select
                v-model="queryList.mediatype"
                size="small"
                style="margin-right: 10px"
                placeholder="请选择媒资类型"
                @change="handleMediaTypeChange"
                clearable
                @clear="handleMediaTypeClear"
            >
                <el-option
                    v-for="item,index in mediaTypes"
                    :key="index"
                    :label="item"
                    :value="index"
                >
                </el-option>
            </el-select>
            <el-select
                v-model="queryList.catid"
                size="small"
                style="margin-right: 10px"
                placeholder="请选一级分类"
                @change="handleCategoryChange"
                clearable
                @clear="handleCategoryClear"
            >
                <el-option
                v-for="item in categoryData"
                :key="item.catid"
                :label="item.name"
                :value="item.catid">
                </el-option>
            </el-select>
            <el-input
                placeholder="请输入媒资名称"
                v-model="queryList.keyword"
                style="width: 200px"
                :clearable="true"
                @clear="handleKeywordClear"
                size="small"
                @keyup.enter="getDataList"
            />
        </template>
        <template #operation>
            <el-button type="primary" size="small" @click="handleRelPackage">添加</el-button>
        </template>
    </table-header>
    <el-row class="table-box">
        <el-col :span="24" class="mt10 mb10">
            <el-table
                v-loading="isloading"
                :data="tableData.listData"
                border
                max-height="350"
                highlight-current-row
                @selection-change="handleSelectionChange"
                @row-click="(row) => {handleRowClick(row)}"
                @sort-change="handleTableSortChange"
                ref="tableref"
            >
                <el-table-column type="selection" width="40" :selectable="handleSelectable" />
                <el-table-column label="缩略图" width="60">
                    <template #default="{row}">
                        <span @click.stop>
                            <el-image
                                v-if="row.thumbs.length > 0 && typeof row.thumbs[0] == 'object'"
                                :preview-src-list="srcList"
                                :initial-index="srcList.indexOf(row.thumbs[0].viewurl)"
                                :src="(row.thumbs[0].isself == 1 && row.thumbs[0].sourcefrom == 'cloudstorage') ? row.thumbs[0].viewurl+'&width=50' : row.thumbs[0].viewurl"
                            />
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="媒资ID" prop="mediaid" width="80px" align="center" />
                <el-table-column label="媒资名称" :show-overflow-tooltip="true">
                    <template #default="{row}">
                        <span v-if="row.highlight && row.highlight.name" v-html="row.highlight.name"></span>
                        <span v-else>{{row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="媒资类型" width="70px" :show-overflow-tooltip="true" align="center">
                    <template #default="{row}">
                        {{row.mediatypename}}
                    </template>
                </el-table-column>
                <el-table-column label="媒资分类" width="70px" :show-overflow-tooltip="true" align="center">
                    <template #default="{row}">
                        <p>{{row.catname}}</p>
                    </template>
                </el-table-column>
                <el-table-column label="是否多集" width="70px" align="center">
                    <template #default="{row}">
                        <span v-if="row.hasseries == 1">是</span>
                        <span v-else>否</span>
                    </template>
                </el-table-column>
                <el-table-column label="来源企业" width="100px" align="center" :show-overflow-tooltip="true">
                    <template #default="{row}">
                        <span v-if="corpPartnerKeyValue[row.corpid] != undefined">{{corpPartnerKeyValue[row.corpid]}}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" width="70px" align="center">
                    <template #default="{row}">
                        <span v-if="row.state == 0">未提交</span>
                        <span v-else-if="row.state == 1">审核中</span>
                        <span v-else-if="row.state == 2">审核通过</span>
                        <span v-else-if="row.state == 3">审核失败</span>
                        <span v-else-if="row.state == 4">免审</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="55px" align="center">
                    <template #default="{row}">
                        <span v-if="row.inuse == 1" type="text" size="mini">上线</span>
                        <span v-else type="text" size="mini">下线</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="150px" align="center" prop="cts" sortable="custom">
                    <el-table-column label="更新时间" width="150px" align="center" prop="mts" sortable="custom">
                        <template #default="{row}">
                            {{row.ctime.replace('T', ' ').replace('Z', '')}}<br />
                            {{row.mtime.replace('T', ' ').replace('Z', '')}}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="添加状态" width="100px" align="center">
                    <template #default="{row}">
                        <span v-if="row.packageids.indexOf(getpackageid) != -1" style="color:#F56C6C">已添加</span>
                        <span v-else style="color:#67C23A" >未添加</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="margin-top: 10px">
            <table-pagination
            :queryList="queryList"
            :total="tableData.total"
            @pagination="getDataList"
            />
        </el-col>
    </el-row>
</template>

<script>
    import {toRef, ref ,reactive} from 'vue'
    import TableHeader from "@/views/public/TableHeader";
    import TablePagination from "@/views/public/TablePagination";
    import { getMediaShareList } from '@/api/corppartner/index'
    import {ElMessage, ElMessageBox} from 'element-plus'
    import {postMediaToPackage} from '@/api/package/package'
    import mediaTypeMixin from "@/mixins/mediaTypeMixin";
    import { getCategories } from '@/api/media/constant'
    import corpPartnerMixin from "@/mixins/corpPartnerMixin";
    export default {
        name: "",
        components: {
            TableHeader,
            TablePagination
        },
        props:{
            packageid:{
                type:Number,
                required: true
            }
        },
        emits:['cancelDialog', 'getData'],
        setup(props, context) {
            const getpackageid = toRef(props, 'packageid')
            const localCancelDialog = () => {
                context.emit('cancelDialog')
            }

            // 媒资类型
            const { mediaTypes } = mediaTypeMixin()
            const handleMediaTypeChange = () => {
                queryList.catid=''
                queryList.page = 1
                getCategory()
                getDataList()
            }
            const handleMediaTypeClear = () => {
                queryList.mediatype = ''
                queryList.catid = ''
                queryList.page = 1
                categoryData.value = []
                getDataList()
            }
            // 一级分类
            const categoryData = ref([])
            const getCategory = () => {
                categoryData.value = []
                if( queryList.mediatype != '' ){
                    getCategories({mediatype:queryList.mediatype,pagesize:1000}).then(response => {
                        if( response.errcode == 0 ){
                            categoryData.value = response.data.list
                        }else{
                            console.log(response)
                        }
                    })
                }
            }
            const handleCategoryChange = () => {
                queryList.page = 1
                getDataList()
            }
            const handleCategoryClear = () => {
                queryList.catid = ''
                queryList.page = 1
                getDataList()
            }
            const handleKeywordClear = () => {
                queryList.keyword = ''
                queryList.page = 1
                getDataList()
            }
            // 图片预览
            const srcList = ref([])
            // 搜索条件
            const queryList = reactive({
                'page': 1,
                'pagesize': 10,
                'mediatype': '',
                'catid': '',
                'keyword': '',
                'orderby': '',
                'type':2
            })
            // 列表相关
            const isloading = ref(true)
            const tableData = reactive({
                total: 0,
                listData: []
            })
            const getDataList = () => {
                isloading.value = true;
                getMediaShareList(queryList).then(response => {
                    isloading.value = false;
                    const {total, list} = response.data
                    tableData.total = total
                    tableData.listData = list
                    srcList.value = []
                    list.forEach(item => {
                        if( typeof item.thumbs[0] == 'object' ){
                            srcList.value.push(item.thumbs[0].viewurl)
                        }
                    })
                })
            }
            const init = () => {
                getDataList()
            }

            const handleSelectable = (row) => {
                if(row.packageids.indexOf(props.packageid) != -1){
                    return false
                }else{
                    return true
                }
            }

            //复选框
            const batchCheckBoxData = ref([])
            const tableref = ref(null)
            const handleSelectionChange = (val) => {
                batchCheckBoxData.value = []
                if(val.length > 0){
                    val.forEach(function(item){
                        batchCheckBoxData.value.push(item.mediaid)
                    })
                }
            }
            const handleRowClick = (row) => {
                if(row.packageids.indexOf(props.packageid) == -1){
                    tableref.value.toggleRowSelection(row)
                }
            }

            //排序
            const handleTableSortChange = (column) => {
                if(column.order == 'ascending'){
                    queryList.orderby = column.prop
                }else if(column.order == 'descending'){
                    queryList.orderby = '-' + column.prop
                }else{
                    queryList.orderby = ''
                }
                getDataList()
            }
            // 媒资添加内容包
            const handleRelPackage = () => {
                if( batchCheckBoxData.value.length == 0 ){
                    ElMessage({type: 'warning', message: '请选择添加的媒资数据', duration: 2000})
                    return
                }
                ElMessageBox.confirm(
                    '确定将所选媒资加入内容包吗？',
                    '加入内容包',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    let query = {
                        mediaids:batchCheckBoxData.value,
                        packageid:props.packageid
                    }
                    postMediaToPackage( query ).then(response => {
                        if( response.errcode == 0 ){
                            ElMessage({type: 'success', message: '加入内容成功', duration: 2000})
                            getDataList()
                            setTimeout(function() {
                                context.emit('getData')
                            }, 2000)
                        }else{
                            console.log(response)
                        }
                    })
                }).catch((err) => {
                    console.log(err)
                })

            }
            // 获取合作企业列表
            const { corpPartnerKeyValue } = corpPartnerMixin({partnertype:0})
            return {
                getpackageid,
                localCancelDialog,
                mediaTypes,
                handleMediaTypeChange,
                handleMediaTypeClear,
                categoryData,
                handleCategoryChange,
                handleCategoryClear,
                handleKeywordClear,
                srcList,
                queryList,
                isloading,
                tableData,
                getDataList,
                init,
                handleSelectable,
                tableref,
                handleSelectionChange,
                handleRowClick,
                handleTableSortChange,
                handleRelPackage,
                corpPartnerKeyValue
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>
